<template>
  <div class="upload-head-pic">
    <div class="img-box">
      <img :src="userHeadPic" alt="" />
    </div>
    <UploadFile
      :fileType="1"
      :defaultValue="defaultValue"
      :buttonTxt="'选择头像'"
      @e-fileData="saveFile"
      class="cover-img-button"
    />
    <p class="txt-explain">图片格式：png、jpg, 尺寸建议：60*60</p>
  </div>
</template>
<script>
import webinfo from '@/mixins/webinfo.js'
export default {
  mixins: [webinfo],
  components: {
    UploadFile: () => import('../uploadFile'),
  },
  data() {
    return {
      userHeadPic: '',
    }
  },
  props: ['defaultValue'],
  mounted() {
    if (this.defaultValue) {
      this.userHeadPic =
        typeof this.defaultValue == 'object'
          ? this.defaultValue.httpUrl
          : this.defaultValue
    } else {
      this.userHeadPic = this.headPic
    }
  },
  methods: {
    saveFile(v) {
      if (!v.length) return
      this.userHeadPic = v[0].httpUrl
      this.$emit('e-headPicId', v[0].id)
    },
  },
}
</script>
<style scoped lang="scss">
.upload-head-pic {
  position: relative;
  .img-box {
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 50%;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .txt-explain {
    position: absolute;
    left: 152px;
    top: 0;
  }
  .cover-img-button {
    position: absolute;
    left: 60px;
    top: 0;
    width: 80px;
    height: 38px;
    overflow: hidden;
  }
}
</style>